import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DailyBill from './DayBill'

const Month = () => {
  // 1、设置时间选择器的显示与隐藏
  const [dateShow,setDateShow] = useState(false)
  // 3、获取redux中账单列表数据
  const {billList} = useSelector(state => state.bill)
  // 3.1 将获取到的账单列表数据进行以月分组的数据
  const groupList = useMemo(() => {
    return _.groupBy(billList,(item) => dayjs(item.date).format('YYYY-MM'))
  },[billList])
  // console.log(groupList)
  // 4、用一个变量存储当前选中时间的数据
  const [currentBillList,setCurrentBillList] = useState([])
  // 2、获取时间选择器的时间并进行渲染
  const [date,setDate] = useState(() => {
    return dayjs(new Date()).format('YYYY-MM')
  })
  const dateConfirm = (date) => {
    setDateShow(false)
    const getDate = dayjs(date).format('YYYY-MM')
    setDate(getDate)
    // 4.1、获取当前选中时间的数据数组,如果选择月份无数据的话，则复制为空数组
    setCurrentBillList(groupList[getDate]?groupList[getDate]:[])
  }
  // console.log(currentBillList)
  // 5、通过数组获取账单信息
  const billResult = useMemo(() => {
    if(currentBillList.length<1) {
      return {
        pay:0,
        income:0,
        total:0
      }
    }
    const pay = currentBillList.filter(item => item.type==="pay").reduce((sum,item)=> sum+item.money,0)
    const income = currentBillList.filter(item => item.type==="income").reduce((sum,item)=> sum+item.money,0)
    return {
      pay,
      income,
      total:pay+income
    }
  },[currentBillList])
  // console.log(billResult)
  // 6、获取当前月数据账单并进行渲染
  useEffect(() => {
    const nowDate = dayjs().format('YYYY-MM')
    if(groupList[nowDate]) {
      setCurrentBillList(groupList[nowDate])
    }
  },[groupList])
  // 7、获取日账单数据
  const dayListObj = useMemo(() => {
    const dayList = _.groupBy(currentBillList,(item) => dayjs(item.date).format('YYYY-MM-DD'))
    const keys = Object.keys(dayList)
    return {
      dayList,
      keys
    }
  },[currentBillList])
  console.log(dayListObj)
  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateShow(true)}>
            <span className="text">
              {date}月账单
            </span>
            {/* <span className='arrow expand'></span> */}
            <span className={classNames('arrow',dateShow && 'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{billResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{billResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{billResult.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={dateShow}
            onCancel={() => setDateShow(false)}
            onConfirm={dateConfirm}
            onClose={() => setDateShow(false)}
            max={new Date()}
          />
          {/* 日账单 */}
        </div>
        {dayListObj.keys.map(item => (<DailyBill key={item} data={item} dayBillList={dayListObj.dayList[item]}/>))}
      </div>
    </div >
  )
}

export default Month